<template>
  <div class="movie">
    <myHead title="电影" :show="true"></myHead>
    <div class="m-banner">
      <van-swipe class="m-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item class="bannerItem" v-for="(l, i) in banner" :key="i">
          <van-image class="m-img" :src="l.imgUrl" alt=""></van-image>
        </van-swipe-item>
      </van-swipe>

      <p class="m-city" v-if="cityinfo" @click="gotocity()">
        <span>{{ cityinfo.name }}</span>
        <van-icon name="arrow-down" size="" />
      </p>
    </div>

    <div class="m-box">
      <van-tabs v-model="type" sticky swipeable animated color="#ff5f16">
        <van-tab title="正在热映" name="1">
          <NewList :refreshdata="refreshdata">
            <ul class="m-list">
              <li v-for="(l, i) in films" :key="i">
                <img :src="l.poster" class="l-img" alt="" />
                <div class="m-center">
                  <p class="name">
                    <span>{{ l.name }}</span
                    ><span>{{ l.item.name }}</span>
                  </p>
                  <p>
                    观众评分<span>{{ l.grade }}</span>
                  </p>
                  <p class="van-ellipsis myactor">
                    主演：
                    <span v-for="(actor, i) in l.actors" :key="i">{{
                      actor.name + " "
                    }}</span>
                  </p>
                  <p>
                    <span>{{ l.nation }}</span>
                    |
                    <span>{{ l.runtime }}分钟</span>
                  </p>
                </div>
                <van-button class="buy-btn">购票</van-button>
              </li>
            </ul>
          </NewList>
        </van-tab>
        <van-tab title="即将上映" name="2">
          <ul class="m-list">
            <li v-for="(l, i) in films" :key="i">
              <img :src="l.poster" class="l-img" alt="" />
              <div class="m-center">
                <p class="name">
                  <span>{{ l.name }}</span
                  ><span>{{ l.item.name }}</span>
                </p>
                <p>
                  观众评分<span>{{ l.grade }}</span>
                </p>
                <p class="van-ellipsis myactor">
                  主演：
                  <span v-for="(actor, i) in l.actors" :key="i">{{
                    actor.name + " "
                  }}</span>
                </p>
                <p>
                  <span>{{ l.nation }}</span>
                  |
                  <span>{{ l.runtime }}分钟</span>
                </p>
              </div>
              <van-button class="buy-btn">购票</van-button>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script>
import { Dialog } from "vant";
export default {
  name: "movie",
  watch: {
    type(v) {
      this.$ajax
        .getmaizuodata(
          {
            type: v,
            pageNum: this.page,
            pageSize: this.pageSize,
            cityId: this.cityinfo.cityId,
          },
          {
            "X-Host": "mall.film-ticket.film.list",
          }
        )
        .then((res) => {
          if (res.code == 200) {
            this.films = res.result.data.films;
            this.total = res.result.data.total;
          }
        });
    },
  },
  created() {
    if (!this.cityinfo) {
      Dialog.alert({
        message: "定位失败，请手动选择当前城市",
      }).then(() => {
        this.$router.push({ name: "city" });
      });
    } else {
      // 若已定位城市就发送ajax请求并获取banner数据
      this.$ajax
        .getmaizuodata(
          {
            type: 2,
            cityId: this.cityinfo.cityId,
          },
          {
            "X-Host": "mall.cfg.common-banner",
          }
        )
        .then((res) => {
          if (res.code == 200) {
            this.banner = res.result.data;
          }
        });

      //获取list
      this.$ajax
        .getmaizuodata(
          {
            type: this.type,
            pageNum: this.page,
            pageSize: this.pageSize,
            cityId: this.cityinfo.cityId,
          },
          {
            "X-Host": "mall.film-ticket.film.list",
          }
        )
        .then((res) => {
          if (res.code == 200) {
            this.films = res.result.data.films;
            this.total = res.result.data.total;
          }
        });
    }
  },
  data() {
    return {
      banner: [],
      list: [],
      type: "1",
      page: 1,
      pageSize: 10,
      films: [],
      total: 0,
    };
  },
  mounted() {},
  methods: {
    gotocity() {
      this.$router.push({ name: "city", query: { name: this.cityinfo.name } });
    },
    refreshdata(callback) {
      if (!this.cityinfo) {
        return;
      }
      this.$ajax
        .getmaizuodata(
          {
            type: this.type,
            pageNum: this.page,
            pageSize: this.pageSize,
            cityId: this.cityinfo.cityId,
          },
          {
            "X-Host": "mall.film-ticket.film.list",
          }
        )
        .then((res) => {
          if (res.code == 200) {
            this.films = res.result.data.films;
            this.total = res.result.data.total;
          }
          callback();
        });
    },
  },
};
</script>


<style lang="scss" scoped>
.movie {
  overflow: auto;
  width: 100%;
}
.m-banner,
.m-img,
.m-swipe {
  width: 100%;
  height: 200px;
}
.m-banner {
  position: relative;
}
.m-city {
  position: absolute;
  left: 5%;
  top: 2%;
  width: 70px;
  height: 28px;
  z-index: 999;
  font-size: 14px;
  background-color: rgba($color: #000000, $alpha: 0.5);
  padding: 5px;
  border-radius: 13px;
  color: white;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.m-box {
  width: 100%;
  height: 100%;
  ::v-deep .van-tab--active {
    color: #ff5f16;
  }
  ::v-deep .van-tab__nav--line {
    border-color: #ff5f16;
  }
}
.m-list {
  padding: 10px;
  li {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .l-img {
      width: 66px;
      height: 95px;
    }
    .m-center {
      padding: 0 10px;
      flex: 1;
      flex-shrink: 0; // 不可以被压缩
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;

      .myactor {
        width: 220px;
      }
      p {
        color: #797d82;
      }
    }
    .buy-btn {
      width: 50px;
      height: 25px;
      border: 1px solid #ff5f16;
      color: #ff5f16;
      font-size: 13px;
      text-align: center;
      border-radius: 2px;
      position: relative;
      padding: 0;
    }
  }
}
.name {
  font-size: 18px;
  span {
    color: #191a1b;
  }
}
</style>